<template>
	<view class="content">
		<view class="img">
			<image src="../../static/index/img_de.png" mode="aspectFill"></image>
		</view>
		<view class="price_browse f-c-b" v-show="type==0">
			<view class="price_browse-price f-c-a">
				<view>
					<text class="f40">￥{{888}}.</text>
					<text>{{88}}</text>
				</view>
				<view class="focus f20">
					已关注
				</view>
			</view>
			<view class="browse f25 c6">
				<u-icon size='30' name='eye'></u-icon>
				<text>220</text>
			</view>
		</view>
		
		<view class="ite fw" v-show="type==1">
			<text class="f40">55</text> <text>积分</text>
		</view>
		
		<view class="product_title f30">甩开油田清爽一夏·【美国版】持妆DW粉底</view>
		<view class="returnAll" v-show="type==0">
			<view class="return f20">
				<text class="return-first">退</text>
				<text class="return-other">七天无理由退换货</text>
			</view>
		</view>
		<view class="introduction">
			<text class="fw">商品简介：</text>
			<text class="introduction-content">这里是商品简介的具体内容，这里是商品简介的具体内容，这里是商品简介的具体内容。</text>
		</view>
		<view class="threeType f-c-a" v-show="type==0">
			<view class="threeTypeItem f-l-c">
				<u-icon name="phone-fill" size='50'></u-icon>
				<text>联系卖家</text>
			</view>
			<view class="threeTypeItem f-l-c">
				<u-icon name="chat-fill" size='50'></u-icon>
				<text>留言</text>
			</view>
			<view class="threeTypeItem f-l-c">
				<u-icon name="share-fill" size='50'></u-icon>
				<text>立即分享</text>
			</view>
		</view>
		<view class="f-c-b f30 buyType" v-show="btnFlag">
			<view class="buyType_one">
				加入购物车
			</view>
			<view class="buyType_two cw">
				立即购买
			</view>
		</view>
		
		<view class="exchange" v-show="type==1" @click="show=true">
			<view class="toExchange f30 f-c-c">
				积分兑换
			</view>
		</view>
		
		<u-modal :show-title=false @confirm='$to(`../exchangeResult/exchangeResult?title=兑换成功&money=100`)' confirm-color='#F57808' confirm-text='继续' width='550' v-model="show" :content="content" :show-cancel-button='true' :content-style="{fontSize:'35rpx',color:'#464646',}" ></u-modal>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				show:false,
				content:'兑换该商品需要55积分 确认兑换吗？',
				btnFlag:true
			}
		},
		onLoad(e) {
			// type=2	我买到的
			console.log(e);
			if(e.type=='积分'){
				this.type=1
				this.btnFlag=false
			}else if(e.type==2){
				this.type=0,
				this.btnFlag=false
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
	}

	.img {
		width: 100%;
		height: 375rpx;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.price_browse-price {
		color: #FF2929;
	}
	.focus{
		color: #F19A42;
		border: 1rpx solid #F19A42;
		padding: 0rpx 10rpx;
		border-radius: 30rpx;
		margin-left: 40rpx;
	}
	.price_browse{
		padding: 20rpx ;
		background-color: #FFFFFF;
	}
	.browse text{
		margin-left: 10rpx;
	}
	.product_title{
		background-color: #FFFFFF;
		padding: 0rpx 20rpx;
	}
	.returnAll{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.return{
		border: 1rpx solid #F19A42;
		padding: 5rpx 0;
		border-radius: 10rpx;
		color: #9B4E02;
		width: 240rpx;
	}
	.return-first{
		background-color: #F19A42;
		color: #FFFFFF;
		padding: 5rpx 8rpx;
	}
	.introduction{
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		margin: 10rpx 0;
	}
	.introduction-content{
		color: #999999;
	}
	.threeTypeItem{
		background-color: #FFFFFF;
		padding: 30rpx 76rpx;
	}
	.buyType{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		line-height: 100rpx;
	}
	.buyType_one{
		text-align: center;
		width: 50%;
	}
	.buyType_two{
		width: 50%;
		background-color: #FF8710;
		text-align: center;
	}
	
	.ite{
		background-color: #FFFFFF;
		margin-top: 5rpx;
		padding: 20rpx;
		color: #FF2929;
	}
	.toExchange{
		width: 100%;
		background-color: #FF8710;
		color: #FFFFFF;
		line-height: 100rpx;
	}
	.exchange{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
